<template>
  <div class="home">
    <!-- 输入框 -->
    <Search></Search>
    <!-- 轮播图 -->
    <Swiper></Swiper>
    <!-- 店铺列表 -->
    <div class="tilte">猜你喜欢</div>
    <div class="btn_list">
        <div :class="{active:sortIndex==index}" @click="doodSrot(index)" v-for="(item,index) in btnArr" :key="index">{{item}}</div> 
    </div>
    <!-- 按钮下面的列表 -->
    <div class="list_title">
        <div v-for="(item,index) in listArr" :key="index">{{item}}</div>
    </div>
    <!-- 店铺商家列表 -->
    <div class="good" v-for="(item,index) in shoplist" :key="index" @click="toDetail(item)" >
        <div class="good_img">
            <img :src="item.picUrl" alt="">
        </div>
        <div class="good_text">
            <div class="good_content">
                <div class="name">{{item.name}}</div>
                <span>☆{{item.wmPoiScore/10}}</span>&nbsp;<span>{{item.monthSalesTip}}</span>
            </div>
            <div class="good_price">
                <div class="price">
                    <span>{{item.minPriceTip}}</span>&nbsp;<span>{{item.shippingFeeTip}}</span> <span>￥6</span> 
                </div>
                <div class="time">
                    <span>{{item.deliveryTimeTip}}</span> <span>{{item.distance}}</span>
                </div>
            </div>
            <div class="discounts" >
                <div v-for="(a,b) in item.discounts2" :key="b" >{{a.info}}</div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
// 导入组件
import Search from '../../components/Home/Search.vue'
import Swiper from '../../components/Home/Swiper.vue'
// 导入封装好的函数
import { shop_list } from '../../utils/api'

export default {
  data(){
    return {
      sortIndex:0,
      btnArr:['综合排序','距离最近','销量最高','筛选'],
      listArr:['年货节热卖','津贴联盟','满减优惠','品质联盟'],
      shoplist:[] //定义空数组用来存储服务端返回的数据
    }
  },
  mounted(){ //挂载函数
    shop_list().then((res)=>{
      this.shoplist = res.data.list
    })
  },
  methods:{ //d定义方法
    toDetail(item){ //跳转到详情页
      this.$router.push('/detail/'+item.mtWmPoiId);
    },
    //用正则过滤字符串
    zhuanshu(str){
      var reg=/^\d$/
      var str1='';
      for(var i=0;i<str.length;i++){
        if(reg.test(str.charAt(i))){
          str1+=str.charAt(i);
        }
      }
        return str1;
    },
    //点击排序
    doodSrot(index){
      this.sortIndex=index;
      if(index==0){
        this.shoplist.sort((a,b)=>{
          return parseInt(b.wmPoiScore)-parseInt(a.wmPoiScore);
        })
      }else if(index==1){
        this.shoplist.sort((a,b)=>{
          return parseInt(a.distance)-parseInt(b.distance);
        })
      }else if(index==2){
        this.shoplist.sort((a,b)=>{
           return parseInt(this.zhuanshu(b.monthSalesTip)) -parseInt(this.zhuanshu(a.monthSalesTip));
        })
      }
    },
  },
  // 注册组件
  components:{
    Search,
    Swiper
  }
}
</script>

<style lang="scss" scoped>
 .tilte{
        width: 100%;
        height: 30px;
        font-weight: bold;
        padding-left: 10px;
        line-height: 30px;
        box-sizing: border-box;
    }
   .btn_list{
        width: 100%;
        display: flex;
        justify-content: space-around;
        margin: 5px 0;
   }
   .btn_list div{
        width: 20%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 5px;
   }
   .list_title{
        width: 100%;
        display: flex;
        justify-content: space-around;
        margin: 5px 0;
   }
   .list_title div{
        width: 23%;
        height: 30px;
        line-height: 30px;
        background: #f5f5f5;
        text-align: center;
        border-radius: 5px;
        font-size: 14px;
   }
 .good{
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin: 20px 0;
   }
.good .good_img{
        width: 20%;
        height: 80px;
        margin-left: 10px;
        border: 1px solid #999999;
   }
 .good .good_img img{
        width: 100%;
   }
 .good .good_text{
        width: 75%;
        line-height: 20px;
    }
 .good .good_text .name{
       font-size: 18px;
       font-weight: bold;
       margin-bottom: 10px;
    }
 .good .good_text .good_content span:nth-child(2){
       font-size: 12px;
       color: red;
    }
    .good .good_text .good_content span:nth-child(3){
       font-size: 12px;
    }
 .good .good_text .good_price{
        width: 100%;
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        padding-right: 5px;
        box-sizing: border-box;
    }
    .good .good_text .good_price .time{
        margin-right: 5px;
    }
 .good .good_text .good_price .price span:nth-child(3){
        text-decoration:line-through;
        font-size: 12px;
    }
 .good .good_text .discounts{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
 .good .good_text .discounts div{
        text-align: center;
        color: red;
        border: 1px solid red;
        margin: 10px  10px 0 0 ;
        font-size: 10px;
        padding: 0 5px;
        box-sizing: border-box;
  }
  .active{
    font-weight: bold;
  }
</style>